import loadable from '@loadable/component'
import Home from "../pages/home";
import ReduxClass from "../pages/redux/reduxClass";

const HookPage = loadable(() => import('../pages/hooks/index'));
const ReduxPage= loadable(() => import('../pages/redux'));
const AnimatePage = loadable(() => import('../pages/animate'));
const KatePage = loadable(() => import('../pages/kate'));
const AntdPage = loadable(() => import('../pages/antd'));
const RecoilPage = loadable(() => import('../pages/recoil'));
// Some folks find value in a centralized route config.
// A route config is just data. React is great at mapping
// data into components, and <Route> is a component.

// Our route config is just an array of logical "routes"
// with `path` and `component` props, ordered the same
// way you'd do inside a `<Switch>`.
export default [
    {
        path: "/home",
        title: "首页",
        component: Home,
        routes: []
    },
    {
        path: "/hook",
        title: "React-hook",
        component: HookPage,
        routes: [
            {
                path: "/hook/state",
                title: "stateHook",
                component: loadable(() => import("../pages/hooks/stateHook")),
                routes: []
            },
            {
                path: "/hook/effect",
                title: "effectHook",
                component: loadable(() => import("../pages/hooks/effectHook")),
                routes: []
            },
            {
                path: "/hook/custom",
                title: "customHook",
                component: loadable(() => import("../pages/hooks/customHook")),
                routes: []
            },
            {
                path: "/hook/other",
                title: "otherHook",
                component: loadable(() => import("../pages/hooks/otherHook")),
                routes: []
            },
        ]
    },
    {
        path: "/redux",
        title: "React-redux",
        component: ReduxPage,
        routes: []
    },
    {
        path: "/reduxClass",
        title: "reduxClass",
        component: ReduxClass,
        routes: []
    },
    {
        path: "/animate",
        title: "两点间直线动画",
        component: AnimatePage,
        routes: []
    },
    {
        path: "/kate",
        title: "kate公式解析",
        component: KatePage,
        routes: []
    },
    {
        path: "/antd",
        title: "Antd-Design组件测试",
        component: AntdPage,
        routes: [
            {
                path: "/antd/load",
                title: "按需加载",
                component: loadable(() => import("../pages/antd/load")),
                routes: []
            },
            {
                path: "/antd/date",
                title: "Antd-date测试",
                component: loadable(() => import("../pages/antd/date")),
                routes: []
            },
            {
                path: "/antd/theme",
                title: "Antd-自定义主题测试",
                component: loadable(() => import("../pages/antd/theme")),
                routes: []
            },
            {
                path: "/antd/attention",
                title: "Antd-其他注意测试",
                component: loadable(() => import("../pages/antd/attention")),
                routes: []
            },
        ]
    },
    {
        path: "/recoil",
        title: "Recoil-新一代状态管理库",
        component: RecoilPage,
        routes: [
            {
                path: "/recoil/demo",
                title: "Recoil demo",
                component: loadable(() => import("../pages/recoil/demo")),
                routes: []
            },
            {
                path: "/recoil/todoList",
                title: "recoil-todoList",
                component: loadable(() => import("../pages/recoil/todo")),
                routes: []
            },
        ]
    }
];